<template>
	<gui-page ref="guipage" :apiLoadingStatus="apiLoadingStatus" :refresh="true" @reload="reload" :loadmore="true"
		@loadmorefun="getData">
		<view slot="gBody">
			<gui-back></gui-back>
			<view class="search-window">
				<!-- 右侧弹出筛选 -->
				<gui-popup ref="guipopupright" position="right" width="580rpx" :zIndex="999">
					<view class="gui-bg-white gui-box-shadow">
						<cpdd-topwave />
						<scroll-view :scroll-y="true" class="win-scrollview">
							<view class="search-form">
								<view class="search-form-item">
									<text class="search-form-label f30">输入框</text>
									<view class="search-form-input">
										<input type="text" v-model="searchForm.keywords" placeholder="请输入关键词"
											placeholder-class="plStyle" />
									</view>
								</view>
								<view class="search-form-item">
									<text class="search-form-label f30">下拉选择</text>
									<view class="search-form-input">
										<cpdd-select v-model="searchForm.selectVal" :list="selectList" keyname="name"
											valname="val"></cpdd-select>
									</view>
								</view>
								<view class="search-form-item">
									<text class="search-form-label f30">单个日期选择带时分秒</text>
									<view class="search-form-input">
										<cpdd-date v-model="searchForm.dateVal" :isTime="true"></cpdd-date>
									</view>
								</view>
								<view class="search-form-item">
									<text class="search-form-label f30">日期区间选择</text>
									<view class="search-form-input">
										<cpdd-dateRange v-model="cpddDateRangeVal"></cpdd-dateRange>
									</view>
								</view>
								<view class="search-form-item">
									<text class="search-form-label f30">日期区间选择带时分秒</text>
									<view class="search-form-input">
										<cpdd-dateRangeTime v-model="cpddDateRangeVal2"
											win="-170rpx"></cpdd-dateRangeTime>
									</view>
								</view>
								<view class="search-form-item">
									<text class="search-form-label f30">选择图片</text>
									<view class="search-form-input">
										<cpdd-uploadimg v-model="searchForm.imgUrl"></cpdd-uploadimg>
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="right-area-footer-place"></view>
						<view class="right-area-footer flex-ac">
							<view class="saveBtn cancleBtn" @tap="handleReset">重置</view>
							<view class="saveBtn" @tap="handleSearch">检索</view>
						</view>
					</view>
				</gui-popup>
			</view>
			<view class="data-module">
				<gui-empty v-if="noData">
					<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="gui-empty-img" src="@/static/noImg.png" mode="widthFix"></image>
					</view>
					<text slot="text" class="gui-text gui-block-text gui-text-center gui-margin-top"
						style="color:#666;padding: 0 100rpx;">暂无数据！</text>
				</gui-empty>
				<view class="data-list">
					<view class="data-item bgfff" @click="selectRow(item)" v-for="(item,index) in dataList" :key="item.id">
						<cpdd-swipe-action>
							<cpdd-swipe-action-item :disabled="isSelect" :index="index" @click="handleClick($event, index)">
								<view v-for="(ele,idx) in columns" :key="ele.prop">
									<view class="item-cell flex-ac" v-if="idx<5">
										<text class="data-item-label">{{ele.label}}：</text>
										<text class="data-item-val qoverDot" v-if="ele.type=='selectBtn'">
											<view class="status-btn" :class="getStatusBtn(item[ele.prop],'className')">
												{{getStatusBtn(item[ele.prop],'text')}}
											</view>
										</text>
										<text class="data-item-val flex1 qoverDot" v-else-if="ele.type=='obj'">
											{{item[ele.prop][ele.typeKey]}}
										</text>
										<text class="data-item-val flex1 qoverDot" v-else>{{item[ele.prop]}}</text>
									</view>
								</view>
								<cpdd-collapse v-if="Object.keys(columns).length>5">
									<cpdd-collapse-item>
										<view v-for="(ele,idx) in columns" :key="ele.prop">
											<view class="item-cell flex-ac" v-if="idx>=5">
												<text class="data-item-label">{{ele.label}}：</text>
												<text class="data-item-val qoverDot" v-if="ele.type=='selectBtn'">
													<view class="status-btn"
														:class="getStatusBtn(item[ele.prop],'className')">
														{{getStatusBtn(item[ele.prop],'text')}}
													</view>
												</text>
												<text class="data-item-val flex1 qoverDot" v-else-if="ele.type=='obj'">
													{{item[ele.prop][ele.typeKey]}}
												</text>
												<text class="data-item-val flex1 qoverDot"
													v-else>{{item[ele.prop]}}</text>
											</view>
										</view>
									</cpdd-collapse-item>
								</cpdd-collapse>
							</cpdd-swipe-action-item>
						</cpdd-swipe-action>
					</view>
				</view>
			</view>
			<view class="com-winBtn flex-ac-jc" @click="handleOpenSearch">
				<text class="gui-icons f40 cfff">&#xe604;</text>
			</view>
			<view class="com-addBtn flex-ac-jc" v-show="!isSelect" @click="goOptions('add')">
				<text class="gui-icons f40 cfff">&#xe6c7;</text>
			</view>
		</view>
	</gui-page>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		columns
	} from './data.js'
	export default {
		data() {
			return {
				isSelect: false,
				searchForm: { //筛选表单
					keywords: '',
					selectVal: '',
					dateVal: '',
					// dateRangeVal:''
					startTime: '',
					endTime: ''
				},
				cpddDateRangeVal: '',
				cpddDateRangeVal2: '',
				query: { //公用查询
					pageNum: 1,
					pageSize: 10
				},
				totalPage: 1, //总页数
				apiLoadingStatus: false, //加载
				dataList: [], //数据
				noData: false, //是否无数据
				selectList: [], //需要下拉的数据,在这里使用是为了新增和编辑不需要了，带过去
			}
		},
		computed: {
			columns() {
				return columns
			}
		},
		onLoad(option) {
			this.getData()
			if(option.type == 'select') {
				uni.setNavigationBarTitle({
					title: '选择从业人员'
				})
				this.isSelect = true;
			}
			uni.$on('reFlashList', () => {
				this.query.pageNum = 1;
				this.getData();
			})
		},
		onUnload() {
			uni.$off('reFlashList')
		},
		methods: {
			selectRow(item) {
				if(!this.isSelect) {
					return;
				}
				uni.$emit('selectCyry', item)
				this.$u.back();
			},
			getStatusBtn(status, type) { //状态处理
				// 1.入账中 2.已到账
				let textStatus = ''
				let className = ''
				switch (status) {
					case '0':
						textStatus = '正常'
						className = 'status-common'
						break;
					case '1':
						textStatus = '停用'
						className = 'status-disable'
						break;
					default:
						break;
				}
				return type == 'text' ? textStatus : className;
			},
			handleSearch() {
				let cpddDateRangeVal = this.cpddDateRangeVal ? JSON.parse(this.cpddDateRangeVal) : []
				if (cpddDateRangeVal.length == 2) {
					this.searchForm.startTime = cpddDateRangeVal[0]
					this.searchForm.endTime = cpddDateRangeVal[1]
				} else {
					this.searchForm.startTime = this.searchForm.endTime = cpddDateRangeVal[0]
				}
				// let cpddDateRangeVal2 = this.cpddDateRangeVal2 ? JSON.parse(this.cpddDateRangeVal2) : []
				// this.searchForm.startTime = cpddDateRangeVal[0]
				// this.searchForm.endTime = cpddDateRangeVal[1]
				console.log('searchForm', this.searchForm);
				this.handleCloseSearch()
			},
			handleReset() {
				Object.keys(this.searchForm).forEach(key => this.searchForm[key] = '')
				this.cpddDateRangeVal = ''
				this.cpddDateRangeVal2 = ''
				this.handleCloseSearch()
			},
			handleOpenSearch() { //搜索点击
				this.$refs.guipopupright.open();
			},
			handleCloseSearch() { //搜索点击
				this.$refs.guipopupright.close();
			},
			handleClick(e, index) { //左滑操作列表点击
				const item = this.dataList[index]
				if (!item || !item.userId) return this.$u.msg('未获取到id')
				if (e.content.text == '查看') {
					this.goOptions('look', item.userId)
				} else if (e.content.text == '编辑') {
					this.goOptions('edit', item.userId)
				} else if (e.content.text == '删除') {
					this.handleDel(item.userId)
				}
			},
			goOptions(op, id) { //操作跳转详情
				let idParams = op != 'add' ? `&id=${id}` : '' //判断要不要带id过去
				this.$u.to(`./form?op=${op}` + idParams)
			},
			handleDel(id) { //删除
				this.$http.delete(`/system/user/${id}`).then(res => {
					let result = res.data
					console.log('', result)
					this.$u.msg('删除成功！')
					this.query.pageNum = 1
					this.getData()
				})
			},
			getData: function(isReload) { //获取列表数据
				// this.dataList = []
				this.apiLoadingStatus = true;
				console.log('加载函数运行，页码 : ' + this.query.pageNum);
				this.$http.get(`/system/user/list`, {
					pageNum: this.query.pageNum,
					pageSize: this.query.pageSize
				}).then(res => {
					let result = res.rows
					console.log('列表', result)
					this.totalPage = Math.ceil(res.total / this.query.pageSize);
					if (this.query.pageNum >= 2) {
						this.dataList = this.dataList.concat(result);
						// 加载完成后停止加载动画
						this.$refs.guipage.stoploadmore();
						// 假定加载了全部数据，通知组件不再加载更多
						if (this.query.pageNum >= this.totalPage) {
							this.$refs.guipage.nomore();
						}
					}
					// 第一页 有可能是第一次加载或者刷新
					else {
						this.dataList = [];
						this.dataList = result;
						this.noData = result.length ? false : true;

						// 刷新
						if (isReload) {
							this.$refs.guipage.endReload();
						}
					}
					this.query.pageNum++;
					this.apiLoadingStatus = false;
				})
			},
			reload: function() {
				this.query.pageNum = 1;
				this.getData(true);
				this.$refs.guipage.endReload();
			},
		}
	}
</script>

<style>

</style>